<template>
    <div class="">
        <div class="title">产品管理</div>
        <div class="contentttt">
            <el-tabs   v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="己发布产品" name="first">
                    <p  v-if="data.length==0?true:false">暂无产品</p>
                </el-tab-pane>
                <el-tab-pane label="未发布产品" name="second">
                    <p  v-if="data.length==0?true:false">暂无产品</p>
                    <div class="nonePrLi">
                        <div class="nonePr" v-for="(item,index) in data" v-show="item">
                            <div class="img"><img :src="item.img" alt=""></div>
                            <div class="text">
                                <div class="productName">{{item.name}}</div>
                                <div class="productId">ID:{{item.id}}</div>
                                <div class="productPinCode">pinCode:{{item.pin_code}}</div>
                                <div class="productPinCode">productKey:{{item.pin_key}}</div>
                            </div>
                            <div class="productCreateTime">{{item.create_time}}</div>
                            <div class="productBtn"><el-button icon="el-icon-edit" type="info" plain @click="editProduct(item.id)">编辑</el-button><el-button type="danger"  icon="el-icon-delete" plain @click="delProduct(index)">删除</el-button></div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <router-link  to="/open/product/Add"><button class="new">新增 + </button></router-link>
            <div class="pageination">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="all_count"
                  :page-size="pagesize"
                  @current-change="page"
                  >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import _ from 'underscore'
    export default {
        activated(){
            if(this.$route.query.isNoSend){
                this.activeName='second'
            }
            this.getProductList()
        },
        data(){
            return{
                activeName: 'first',
                data:[
                ],
                all_count:0,//总页数
                page1:1,//己发布
                page2:1,//未发布
                pagesize:5,
                showPage:1
            }
        },
        methods:{
            page(e){
                if(this.activeName=="first"){
                    this.page1=e
                }else{
                    this.page2=e
                }
                this.getProductList()
            },
            handleClick(){
                this.getProductList()
            },
            editProduct(id){
                this.$router.push({path:'/open/product/Edit/'+id})
            },
            getProductList(){
                var data={token:localStorage.getItem('token')}
                if(this.activeName=="first"){
                    data.page=this.page1
                    data.type=1
                }else{
                    data.page=this.page2
                    data.type=0
                }
                this.$http.post(this.$store.getters.serverIp+'get_product_info',data).then((response)=>{
                  if(response.data.success){
                        this.all_count=Number(response.data.all_count)
                        var data=response.data.data
                        data=_.map(data,(value)=>{
                            value.img=this.$store.getters.serverStaticIp+value.img
                            var date = new Date(value.create_time * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                            var Y = date.getFullYear() + '-';
                            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                            var D = date.getDate() + ' ';
                            var h = date.getHours() + ':';
                            var m = date.getMinutes() + ':';
                            var s = date.getSeconds();
                            var create_time=Y+M+D+h+m+s;
                            value.create_time=create_time
                            return value
                        })
                        this.data=data
                    }
                  }).catch(()=>{
                    cons
                })
            },
            delProduct(index){
                this.$confirm('是否删除该产品?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    var pid=this.data[index].id
                    var data={token:localStorage.getItem('token'),id:pid}
                    this.$http.post(this.$store.getters.serverIp+'del_product',data).then((response)=>{
                      if(response.data.success){
                        this.data.splice(index,1)
                          this.$message.success({
                            type: 'success',
                            message: '删除成功!',
                            duration:1000
                          });
                        }
                      }).catch(()=>{
                    })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
            }
        }
    }

</script>

<style lang="less">
    .el-tabs.el-tabs--card.el-tabs--top{
        width: 100% !important;
        position:relative;
        display: inline-block !important;
    }
    .title{
        font-size: 24px;
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        color: #324157;
        text-indent: 17px;
        padding: 9px;
    }
    .contentttt{
        padding: 5px;
        padding-left: 2%;
        >button:hover{
            cursor:pointer;
            outline:none
        }
        .pageination{
            text-align: center;
            margin: 23px;
        }
    }
    .nonePr{
        border: 1px solid #ccc;
        border-radius: 6px;
        margin-bottom: 10px;
        position:relative;
        padding: 10px;
         height: 167px;;
        box-shadow: 1px 1px 7px #B9B9BA;
        >div{
            display:inline-block;
            line-height: 21px;
        }
        .img{
            width: 9%;
            img{
                width:80%
            }
        }
        .text{
            position: absolute;
            top: 33px;
            left: 15%;
            .productName,productId{
                font-size: 18px;
            }
            .productPinCode{
                color: #ccc;
            }
        }
        .productCreateTime{
          position: absolute;
          font-size: 14px;
          top: 59px;
          left: 41%;
        }
        .productBtn{
            position: absolute;
            right: 21px;
            top: 55px;
        }
    }
    .el-tabs__item{
        font-size:15px !important;
    }
    .el-tabs__active-bar{
      background-color: #313f4f !important;  
    }
    .el-tabs__item:hover {
        color: #186a67 !important;
        cursor: pointer !important;
    }
    .el-tabs__item.is-active {
        font-size:17px !important;
      color: #19470e !important;
    }
</style>

